<script setup lang="ts">
import * as echarts from 'echarts';
import { onMounted } from "vue";

onMounted(() => {
    var myChart = echarts.init(document.getElementById('destination'));

    // 指定图表的配置项和数据
    var option = {
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {},
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: {
            type: 'value',
            // boundaryGap: [0, 0.01]
            max: '6000'
        },
        yAxis: {
            type: 'category',
            data: ['湖北', '江苏', '浙江', '广西', '广东', '重庆', '天津', '上海']
        },
        series: [
            {
                name: '2011',
                type: 'bar',
                data: [3344, 1123, 4313, 1234, 5312, 5412, 5422, 4333]
            },
            {
                name: '2012',
                type: 'bar',
                data: [3344, 1123, 4313, 1234, 5312, 5412, 5422, 4333]
            },
            {
                name: '2012',
                type: 'bar',
                data: [3344, 1123, 4313, 1234, 5312, 5412, 5422, 4333]
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
})
</script>

<template>
    <div class="left-Top">
        <div class="left-Top-img">
            <span style="padding: 10px; color: aliceblue; font-size: 1.5rem; line-height: 3rem;">近三年来毕业人员去向</span>
        </div>
        <div class="left-Top-bottom">
            <h3 style="padding: 1rem; color: white;">北京</h3>
            <div class="left-Top-bottom-header">
                <div>
                    <p style="color: rgba(255, 7, 198, 1); font-weight: bolder;">6000人</p>
                    <div>
                        <img src="../../assets/icon2/人员 01.png" alt="">
                    </div>
                    <p style="color: #fff;">2022</p>
                </div>
                <div>
                    <p style="color: rgba(8, 219, 242, 1); font-weight: bolder;">8980人</p>
                    <div>
                        <img src="../../assets/icon2/人员 02.png" alt="">
                    </div>
                    <p style="color: #fff;">2021</p>
                </div>
                <div>
                    <p style="color: rgba(238, 204, 91, 1); font-weight: bolder;">2345人</p>
                    <div>
                        <img src="../../assets/icon2/人员 03.png" alt="">
                    </div>
                    <p style="color: #fff;">2020</p>
                </div>
            </div>
            <div class="left-Top-bottom-foot">
                <div id="destination" style="width: 100%;height:100%;"></div>
            </div>
        </div>
    </div>
</template>

<style scoped lang="scss">
.left-Top {
    width: 28rem;
    height: 30rem;
    margin: 6rem 6rem;
    background-color: rgb(16, 29, 91);

    &-img {
        width: 100%;
        height: 3rem;
        background: url('../../assets/images/leftImg.png') no-repeat center center;
        background-size: 100% 100%;
    }

    &-bottom {
        width: 100%;
        height: 25rem;
        margin-top: 2rem;
        background-color: rgb(29, 46, 107);

        &-Top {
            width: 96%;
            height: 4rem;
            margin: 2%;
            display: flex;
            text-align: center;
            align-items: center;
            color: white;
        }

        &-header {
            width: 100%;
            height: 5em;
            display: flex;
            margin-bottom: 1rem;

            >div {
                flex: 1;
                text-align: center;
            }
        }

        &-foot {
            width: 100%;
            height: 15rem;
        }
    }
}
</style>